<%@page import="com.wframe.framework.util.UploadUtil"%>
<%@ page language="java" pageEncoding="utf-8"%>
<%@taglib uri="/WEB-INF/page-base.tld" prefix="w"%>
<%@ include file="/plugins/plupload2/plupload.jsp"%>
<%String path=request.getContextPath(); request.setAttribute("fileserver", UploadUtil.getConfig().getDownserver());%>
<link href='<%=path %>/plugins/font-awesome/css/font-awesome.min.css' rel='stylesheet' type='text/css'>
<style>
    .pl_upimgdiv img{max-width:100%}
</style>
<script>
    var channeluploader;
    function selchannelimg(){

    }
    function delplphoto(fid,bl){
        try{
            var f=channeluploader.getFile(fid);
            channeluploader.removeFile(f);
        }catch(e){}
        $('#plfile_'+fid).remove();
    }
    function channelquerypro(){
        $("#channelProductstb").datagrid("load",{"bean.like":$getByName("proname",$w.currWin()).val(),"bean.rows":100})
    }
    function channelpromoveR(){
        var boxs=$("#channelProductstb").datagrid('getChecked');
        var selds=$("#channelProductsedtb").datagrid('getRows');
        for(var i=0;i<boxs.length;i++){
            var add=true;
            for(var n=0;n<selds.length;n++){
                if(selds[n].idcode==boxs[i].idcode){
                    add=false;
                    break;
                }
            }
            if(add){
                $('#channelProductsedtb').datagrid('insertRow',{
                    index: 0,	// index start with 0
                    row: {
                        idcode: boxs[i].idcode,
                        fullname: boxs[i].fullname,
                        productcode:boxs[i].productcode
                    }
                });
            }
        }
    }
    function channelpromoveL(){
        var selds=$("#channelProductsedtb").datagrid('getChecked');
        var n=selds.length;
        for(var i=0;i<n;i++){
            var index=$("#channelProductsedtb").datagrid('getRowIndex',selds[0].idcode);
            $("#channelProductsedtb").datagrid('deleteRow',index);
        }
    }

    var saveing=false;
    function savechannel(){
        var obj=$getByName("bean.photo",$w.currWin());
        if((obj.length==0 || obj.val()=='') && channeluploader.files.length==0){
            window.parent.$w.infoMsg("请上传栏目图片")
        }else{
            var selds=$("#channelProductsedtb").datagrid('getRows');
            if(selds.length==0){
                window.parent.$w.confirmMsg("没有添加商品，是否继续?",function(r){
                    if(r)savenext();
                })
            }else savenext();
        }
    }
    function savenext(){
        var selds=$("#channelProductsedtb").datagrid('getRows');
        var proids="";
        for(var i=0;i<selds.length;i++){
            if(proids!="")proids+=",";
            proids+=selds[i].idcode;
        }
        $getByName("bean.products",$w.currWin()).val(proids);
        if(!saveing){
            saveing=true;
            if(channeluploader.files.length>0)channeluploader.start();
            else savechannelSubmit();
        }
    }
    function savechannelSubmit(){
        $w.doWinForm(function(re){
            saveing=true;
            if(re.state=='ok'){
                var reobj={"id":re.id,"name":$getByName("bean.name",$w.currWin()).val(),"code":re.code,"photo":$getByName("bean.photo",$w.currWin()).val(),"url":$getByName("bean.url",$w.currWin()).val(),"orderno":$getByName("bean.orderno",$w.currWin()).val()};
                $w.closeCurrWin(reobj);
            }
        });
    }
</script>

<div class="easyui-panel" data-options="doSize:false,layoutH:47,border:false" style="margin:5px">
    <form method="post" action="/information/InformationPage@saveChannelB.page" class="pageForm">
        <w:hidden bind="bean.id"/>
        <w:hidden bind="bean.code"/>
        <w:hidden bind="bean.products"/>
        <div class="ui-formContent">
            <p>
                <label style="width:130px;text-align:right"><font class="red">*</font>栏目名称：</label>
                <w:text bind="bean.name" styleClass="easyui-validatebox" dataOptions="required:true"  style="width:400px"/>
            </p>
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td valign="top" style="padding-top:4px;"><label style="width:130px;text-align:right"><font class="red">*</font>栏目图片：</label></td>
                    <td valign="top" style="width:200px;padding-top:4px;padding-left:4px;" id="channelimg">
                        <w:notEqual bind="bean.photo" value="">
                            <w:hidden bind="bean.photo"/>
                            <img src="${fileserver }<w:write bind="bean.photo"/>" style="width:200px">
                        </w:notEqual>
                        <w:equal bind="bean.photo" value="">
                            <img src="<%=path %>/images/selimg.png" style="width:200px">
                        </w:equal>
                    </td>
                    <td valign="top" style="padding-top:4px;padding-left:4px;">
                        <a href="javascript:void(0);" class="ui_btn" id="channelimgbtn" onclick="selchannelimg()">选择图片</a>
                        <!-- <p class="red" style="color:red">建议上传1024*300尺寸图片</p>-->
                    </td>
                </tr>
            </table>
            <p style="clear:both">
                <label style="width:130px;text-align:right">链接网址：</label>
                <w:text bind="bean.url" style="width:400px"/>
            </p>
            <p style="clear:both">
                <label style="width:130px;text-align:right">排序号：</label>
                <w:text bind="bean.orderno" style="width:400px" styleClass="easyui-numberbox"/>
            </p>

            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td valign="top" style="padding-top:4px;"><label style="width:130px;text-align:right"><font class="red">*</font>添加商品：</label></td>
                    <td valign="top" style="padding-top:4px;padding-left:4px;">
                        <div style="width:410px;border:1px solid #ddd;height:26px;line-height:26px;background:#fff"><input name="proname" style="display:inline-block;border:0px;margin:0px;width:346px;height:20px;"><a href="javascript:channelquerypro();" style="display:inline-block;float:right;height:26px;background:#F3F3F4;width:40px;color:#666666;text-align:center;font-size:18px;"><i class="fa fa-search"></i></a></div>
                        <div style="width:410px;border:1px solid #ddd;border-top:none">
                            <table id="channelProductstb" class="easyui-datagrid" style="width:410px;height:320px"
                                   data-options="url:'<%=path %>/products/ProductPage@loadProductPrices.page?rows=20&bean.status=2',fitColumns:true,multiple: true,idField:'idcode',
					        singleSelect:false,border:false,checkbox:true,pagination:false">
                                <thead>
                                <tr>
                                    <th data-options="field:'idcode',checkbox:true"></th>
                                    <th data-options="field:'fullname',width:310">商品名称</th>
                                    <th data-options="field:'productcode'">商品编码</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </td>
                    <td width="50" align="center">
                        <p><a href="javascript:void(0);" class="ui_btn" id="channelimgbtn" onclick="channelpromoveR()">></a></p>
                        <p><a href="javascript:void(0);" class="ui_btn" id="channelimgbtn" onclick="channelpromoveL()"><</a></p>
                        <p>&nbsp;</p>
                    </td>
                    <td valign="top" style="padding-top:4px;padding-left:4px;">
                        <div style="width:410px;border:1px solid #ddd;margin-top:28px;">
                            <table id="channelProductsedtb" class="easyui-datagrid" style="width:410px;height:320px"
                                   data-options="url:'<%=path %>/information/InformationPage@loadChannelProducts.page?rows=200&bean.channelid=<w:write bind="bean.id"/>',fitColumns:true,multiple: true,idField:'idcode',
					        singleSelect:false,border:false,checkbox:true,pagination:false">
                                <thead>
                                <tr>
                                    <th data-options="field:'idcode',checkbox:true"></th>
                                    <th data-options="field:'fullname',width:310">商品名称</th>
                                    <th data-options="field:'productcode'">商品编码</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </td>
                </tr>
            </table>
            <br/>
        </div>
    </form>
</div>
<div class="ui-buttonBar">
    <a href="javascript:;" class="easyui-linkbutton marginR16" iconCls="icon_save" onclick="savechannel();">保 存</a>
    <a href="javascript:;" class="easyui-linkbutton" iconCls="icon_cancel" onclick="$w.closeCurrWin()">取 消</a>
</div>
<script>
    var plparm={
        runtimes : 'html5,flash,silverlight,html4',
        browse_button : 'channelimgbtn',
        flash_swf_url : ctx+'/plugins/plupload/js/Moxie.swf',
        silverlight_xap_url : ctx+'/plugins/plupload/js/Moxie.xap',
        filters : {
            max_file_size : '2mb',
            mime_types: [
                {title : "Image files", extensions : "jpg,gif,png"}
            ]
        },

        init: {
            FilesAdded: function(up, files) {
                $("#channelimg").html('');
                if(files.length>0){
                    if(channeluploader.files.length>1)channeluploader.removeFile(uploaderobj.files[0]);
                }
                filesAdded(up,files,'#channelimg');
            },

            UploadProgress: function(up, file) {
                uploadProgress(up,file);
            },
            FileUploaded:function(up,file,responseObject){
                var re=jQuery.parseJSON(responseObject.response);
                $('#plimgurl_'+file.id).val(re.url.replace(re.basepath,""));
            },
            UploadComplete:function(up,files){
                savechannelSubmit();
            },
            Error: function(up, err) {upError(up, err,'2mb');}
        }
    };

    $oss.setUpDir('info');
    channeluploader=$oss.initUpload(plparm);
</script>